<template>
	<view>
		<p-navbar title="提币">
			<view class="jl"  @tap="record">
				提币记录
			</view>
		</p-navbar>
		<view class="container">
			<view class="title">
				币种：USDT
			</view>
			<view class="input-item" v-for="(item,index) in inpList" :key="index">
				<!-- 标题 -->
				<view class="url-text flex align-items justify-between">
					{{item.name}}
					<text v-if="item.name=='数量'" class="keyong">可用数量：{{util.decimal(userinfo.myMoney.balance)}}</text>
				</view>
				<!-- input 输入框 -->
				<view class="inp flex align-items justify-between">
					<input :style="item.name=='提现地址'&&'width: 50%;'" v-model="form[item.key]" :placeholder="item.tishi" @tap="focus(item.key)" />
					<view class="right" @tap="saoma">
						<image class="address" style="width: 24rpx;height: 24rpx;" v-if="item.name=='提现地址'" src="../../static/user/sao.png" mode=""></image>
						<text v-if="item.name=='提现地址'">扫一扫</text>
					</view>
					<!-- 地址 -->
					<view class="right" @tap="addresurl">
						<image class="address" v-if="item.name=='提现地址'" src="../../static/user/address.png" mode=""></image>
						<text v-if="item.name=='提现地址'">添加地址</text>
					</view>
					<!-- 数量 -->
					<view v-if="item.name=='数量'" class="keyong">
						USDT <text style="margin: 0 10rpx;">|</text> <text style="color: #FFB740;"  @tap="sell(item.key)">全部</text>
					</view>
					<!-- 验证码 -->
					<view v-if="item.name=='验证码'" class="keyong">
						<view class="code" style="color: #FFB740;" :class="{ disabled: !codeClick }"  @tap="getMsmCode">{{ codeText }}</view>
					</view>
				</view>
			</view>
			<view class="code">
			
				<view class="tips">
					<!-- {{arr[aindex]}} -->
					<view class="title">温馨提示：</view>
					<text>1：最小提币数量: 10 (TRC20)</text>
					<text>2：请再次确认您的提币地址是否正确，务必确认电脑及浏览器安全，防止信息被篡改或泄露</text>
				</view>
				<!-- <view class="yuer">
					<view class="yuer-item">到账数量</view>
					<view class="yuer-item1">9999  USDT</view>
				</view> -->
				<view class="submit">
					<u-button type="primary" ripple :loading="loading" shape="circle"  @click="tibis">提 币</u-button>
				</view>
				<!-- 安全密码输入 -->
				<u-popup v-model="shows" mode="bottom" class="popup">
					<view class="pop" >
						安全支付
					</view>
					<view class="form" style="padding: 0 20rpx;">
						<view class="item" v-for="(item,index) in prson" :key="index" style="padding-top: 20rpx;">
							<view class="label">{{ item.label }}</view>
							<view class="content">
								<input class="input" :placeholder="item.msg" :maxlength="item.len" :type="item.type" v-model="form[item.key]" />
								<view class="password" :class="{ show: showPsw }" v-if="item.icon === 'password'" @tap="fnPsw(index)"></view>
							</view>
						</view>
					</view>
					<view class="submit" >
						<u-button type="primary" ripple shape="circle" :loading="loading" @tap.stap="fnRegister">确 定</u-button>
					</view>
				</u-popup>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		getCode
	} from '@/utils/mixins';
	export default {
		data() {
			return {
				inpList:[
					{
						name:"提现地址",
						tishi:"请输入地址",
						len: 40,
						key:'withdrawAddress'
					},
					{
						name:"数量",
						tishi:"请输入数量",
						len: 10,
						key:'amount'
					},
					{
						name:"验证码",
						tishi:"请输入验证码",
						len: 6,
						key:'authCode'
					}
				],
				loading: false,
				shows:false,
				showPsw: false,
				form:{},
				prson: [{
					key: 'password',
					label: '安全密码',
					msg: '请设置您的安全密码',
					icon: 'password',
					type: 'password',
					len: 20
				}],
				phone:'',//获取手机号
			}
		},
		mixins: [getCode],
		computed:{
			userinfo(){
				return this.$state.userinfo
			},
		},
		onLoad() {
			this.request('coinWithdraw/phone').then(res=>{//获取手机号
				this.phone=res.data.data
			})
		},
		methods: {
			tibis(){
				// this.util.toast('暂未开通')
				// return ;
				this.shows=true
			},
			//扫码
			saoma(){
					  // 允许从相机和相册扫码
					  uni.scanCode({
					      success: (res)=>{
					          // console.log(res.result);
							  // this.form.withdrawAddress = res.result
							  this.$set(this.form,'withdrawAddress',res.result)
					      }
					  });
			},
			addresurl(){
				uni.navigateTo({
					url:'./address-item'
				})
			},
			focus(key){
				if(key=='withdrawAddress'){
					uni.$on('update', (data) => {//兄弟页面传值
						this.$set(this.form,'withdrawAddress',JSON.parse(data).withdrawAddress)
						uni.$off()
					})
					this.$Router.push({ path: '/pages/user/address'})
				}
			},
			sell(item){//获取全部金额
				this.form[item]=this.util.decimal(this.userinfo.myMoney.balance)
				this.$forceUpdate()
			},
			record(){//记录
			uni.navigateTo({
				url:'./record?type=1'
			})
			},
			getMsmCode(){
				if (!this.codeClick) return
				const phone = this.phone
				if (!phone) return this.util.toast('请输入您的手机号码')
				if (!this.$u.test.mobile(phone)) return this.util.toast('请输入正确的手机号码')
				this.getCode(phone,1)
			},
			fnRegister(){
				for(let i=0;i<this.inpList.length;i++){
					if(!this.form[this.inpList[i].key] ) return this.util.toast(this.inpList[i].tishi)
				}
				if(!this.form.password) return this.util.toast('安全密码不能为空')
				if(this.form.amount<10) return this.util.toast('数量不正确')
				this.loading=true
				this.request('coinWithdraw/position',{
					...this.form,
				}).then(res=>{
					if(res.data.code){
						this.restoreCode()//重置验证码
						this.util.toast('提币成功','success')
						this.shows=false//模态框隐藏
						this.now()//数据清空
					}
					this.loading=false//防止按钮多次点击
					
				})
			},
			now(){//数据清空
				for(let i in this.form){
					this.form[i]=null
				}
			},
			fnPsw(i) { //密码隐藏显示
				this.showPsw = !this.showPsw;
				const type = this.prson[i].type
				this.$set(this.prson[i], 'type', type === 'password' ? 'text' : 'password')
			},
		}
	}
</script>

<style lang="scss">
	.jl{
		color: $color-fu;
	}
	.container{
		padding: 0 36rpx;
		box-sizing: border-box;
		.title{
			font-size: 36rpx;
			font-family: PingFang;
			font-weight: 400;
			color: #333;
			margin: 40rpx 0;
		}
		.input-item{
			border-bottom: 1px solid rgba(22, 119, 255, 0.05);
			margin-top: 40rpx;
			.url-text{
			font-size: 36rpx;
			}
			.keyong{
				font-size: 24rpx;
				font-weight: 400;
				color: #333;
			}
			input{
				font-size: 24rpx;
				font-family: PingFang;
				font-weight: 400;
				height: 64rpx;
			}
		}
		.codes {
			font-size: 26rpx;
			color: $light-color;
		
			text {
				@include click;
				padding-left: 15rpx;
				margin-left: 15rpx;
				display: inline;
				font-size: 26rpx;
				font-family: PingFang;
				font-weight: bold;
				// line-height: 60px;
				color: rgba(255, 255, 255, 0.3);
			}
		}
		
		.code {
			@include flex;
			flex-direction: column;
			// padding: 50rpx 24rpx 60rpx 24rpx;
		
			.qrcode {
				border: 1rpx dashed;
				width: 250rpx;
				height: 250rpx;
				margin-bottom: 30rpx;
			}
		
			&-save {
				font-size: 30rpx;
				color: $color-white;
				margin-bottom: 30rpx;
				padding: 15rpx 30rpx;
				border-radius: 20rpx;
				background-color: rgba($color-primary, 0.7);
			}
		
			/deep/ .u-btn {
				background-color: $color-primary !important;
				height: 58rpx;
				width: 195rpx;
				border-radius: 6rpx;
				font-size: 20rpx;
				margin-bottom: 23rpx;
			}
		
			.number {
				padding: 20rpx;
				font-size: 24rpx;
				font-family: PingFang;
				font-weight: bold;
				line-height: 34rpx;
				color: #333333;
				// color: $text-regular;
			}
		}
		.tips {
			text-align: left;
			font-size: 26rpx;
			color:  #000000;
		
			.title {
				// color: $text-regular;
				font-weight: bold;
				margin-bottom: 20rpx;
				font-size: 30rpx;
			}
		
			text {
				// color: $text-regular;
				display: block;
				font-size: 20rpx;
				color:  rgba(255, 255, 255, 0.3);
				color:  #000000;
				margin-bottom: 20rpx;
				line-height: 1.4;
			}
		}
		.yuer {
			width: 100%;
			align-items: center;
			display: flex;
			justify-content: space-between;
		
			.yuer-item {
				font-size: 26rpx;
				font-family: PingFang;
				font-weight: 500;
				line-height: 36rpx;
				color: #FFFFFF;
			}
		
			.yuer-item1 {
				font-size: 30rpx;
				font-family: PingFang;
				font-weight: 500;
				line-height: 42px;
				color: #fff;
			}
		}
		.submit {
			margin: 50rpx 50rpx 20rpx;
			
			/deep/ .u-btn {
				background-color: $light-color !important;
				transition: .3s;
				height: 90rpx;
				width: 650rpx;
				border-radius: 20rpx;
				font-size: 30rpx;
			}
		
			/deep/ .u-round-circle::after {
				border-radius: 20rpx;
			}
		}
		.popup {
			/deep/ .u-drawer-bottom {
				bottom: 0;
				left: 0;
				right: 0;
				background-color: $color-bgs !important;
			}
		}
		.pop {
			// width: 100%;
		
			font-size: 32rpx;
			font-family: PingFang;
			font-weight: bold;
			// padding: 0rpx 30rpx 0rpx 100rpx;
			line-height: 100rpx;
			border-bottom: 1rpx solid $border;
			text-align: center;
			// color: #FFFFFF;
		
			text {
				float: right;
				padding-right: 40rpx;
				font-size: 24rpx;
				color: #999999;
				// padding-left: 20%;
			}
		}
		.form {
			padding: 0 40rpx;
			// background: #FFFFFF;
			border-radius: 12rpx;
			margin: 0rpx 0rpx;
			
		}
		.item {
			padding-top: 40rpx;
			border-bottom: 1rpx solid $border;
			.content {
				@include flex;
			}
		
			.label {
		
				font-family: PingFang;
				font-weight: bold;
				color: #FFFFFF;
				height: 40rpx;
				font-size: 28rpx;
		
				background-size: 36rpx 40rpx;
				background-position: 0 center;
				background-repeat: no-repeat;
				// line-height: 40rpx;
			}
		
			.input {
				// color: #FFFFFF;
				font-size: 26rpx;
				height: 100rpx;
				padding: 0 30rpx 0 0rpx;
				flex: 1;
				background: none;
				border: none;
				outline: none;
			}
			.password {
				width: 32rpx;
				height: 30rpx;
				@include background;
				margin-right: 50rpx;
				@include click;
				background-image: url(../../static/user/login-psw-hide.png);
				background-size: 100%;
				margin-top: 5rpx;
			
				&.show {
					color: red;
					background-image: url(../../static/user/login-psw-show.png);
					// @include background;
				}
			}
		
			.code {
				padding: 0rpx;
				font-size: 28rpx;
				font-family: PingFang;
				font-weight: 500;
				line-height: 50rpx;
				color: $light-color;
				margin-right: 30rpx;
				@include click;
			}
		}
	}
    .address{
		width: 18rpx;
		height: 24rpx;
		margin-right: 20rpx;
	}
</style>
